<template>
  <div class="content">
    <el-form class="form-inline" :model="formInline" :inline="true">
      <el-form-item label="所属设备">
        <el-select v-model="formInline.device" placeholder="请选择设备">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属变量">
        <el-select placeholder="请选择变量">
          <el-option label="bit" value="bit"></el-option>
          <el-option label="bool" value="bool"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-col :span="11">
          <el-date-picker type="datetime" placeholder="开始时间" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center;">-</el-col>
        <el-col :span="11">
          <el-date-picker type="datetime" placeholder="结束时间" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item class="form-button">
        <el-button type="primary" @click="goSubmit">查询</el-button>
        <el-button @click="goReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary">删除</el-button>
      <el-button type="primary">一键已读</el-button>
    </div>
    <el-table style="width: 100%;margin-top: 20px;">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column prop="" label="报警条件"></el-table-column>
      <el-table-column prop="" label="设备名称"></el-table-column>
      <el-table-column prop="" label="变量名称"></el-table-column>
      <el-table-column prop="" label="报警信息"></el-table-column>
      <el-table-column prop="" label="值"></el-table-column>
      <el-table-column prop="" label="创建时间"></el-table-column>
      <el-table-column prop="" label="是否已读"></el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button size="small" type="primary">修改</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize" :current-page="currentPage"
        layout="total, prev, pager, next, sizes, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'

const formInline = ref({
  device: '',
})

// 查询
const goSubmit = () => {

}
// 重置
const goReset = () => {
  formInline.value = {
    device: '',
  }
}
// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  console.log(`每页 ${val} 条`)
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  console.log(`当前页: ${val}`)
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  font-size: 14px;
  background-color: #ffffff;
  padding: 20px;
}

.form-inline {
  margin-left: 10px;
  border-radius: 4px;
}

.el-input,
.el-select {
  width: 400px;
  margin-right: 10px;
}

.form-button {
  float: right;
}

.form-button .el-button {
  margin-right: 10px;
}

:deep(.el-table) {
  border: 1px solid #ebeef5;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #101010;
  font-weight: 600;
  text-align: center;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-button) {
  margin-right: 8px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
